<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html,body,svg {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <svg>
    <rect x="100" y="100" width="100" height="100" fill="red">
      <!--
        begin 指定动画什么时候开始
        默认为0 表示文档加载加速过后经过0秒马上开始
        goleft.end 表示goleft动画结束后开始
        还有其它很多表达式
      -->
      <animate
        id="goright"
        attributeType="XML"
        attributeName="x"
        from="100"
        to="500"
        dur="1s"
        fill="freeze"
        begin="0; goleft.end"
      ></animate>
      <animate
        id="goleft"
        attributeType="XML"
        attributeName="x"
        from="500"
        to="100"
        dur="1s"
        fill="freeze"
        begin="goright.end"
      >
      </animate>
    </rect>
  </svg>
</body>
</html>
